<!DOCTYPE html>
<html lang="en">

<head>
	<meta name="auto" content='homo'>
	<meta charset="UTF-8">
	<title>旅行社 -登录</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/login.css">
</head>

<body>
	<header id='header'>
		<div class='center'>
			<nav style='overflow:hidden;'>
				<h2 class="none">网站导航</h2>
				<ul class="link">
					<li><a href="index.html">首页</a>

					<li><a href="information.html">旅行信息</a>
				
					<li><a href="buy.html">订购</a>
	
					<li><a href="scenery.html">风景欣赏</a>
		
					<li class="active"><a href="#">登录</a>
				</ul>
			</nav>
		</div>
	</header>
	<form onsubmit="return checkForm()">
		<div id="search">
			<div id="login">
				<div style="text-align: center;"><span id="login_header1">登录</span><b>·</b><span id="login_header"
						onclick="jump_1()">注册</span></div>
				<div><input class="input" placeholder="账号" type="username" id="username" autofocus
						style="margin: 0px 40 0px; border-radius: 0px 0px 0px 0px; "></div>
				<div><input class="input" placeholder="密码" type="password" id="password" value="" autofocus
						style="margin: 0px auto 0px; border-radius: 0px 0px 4px 4px;"></div>
				<div class="login-code">
					<input type="input" placeholder="验证码" value="" id="vcode-in" class="vcode-in">
					<div class="vcode" id="vcode"></div>
					<div id="errorMsg">
					111
					</div>
				</div>

				<div class=""><button class="button_1" style="margin-top: 20%;" onclick="success()">登 录</button>
				</div>

			</div>
		</div>
		<div></div>
		</div>

		</div>

	</form>

	<script>

		function jump_1() {
			window.location.href = "register.html";
		}
		function jump() {
			window.location = "index.html";
		}
	</script>
	<script>
		function success() {

			var username = document.getElementById('username').value;
			var password = document.getElementById('password').value;
			var inputCode = document.getElementById("vcode-in").value;
			var codeToCheck = document.querySelector(".vcode").innerHTML;

			if (inputCode !== codeToCheck) {
				showErrorMessage('验证码错误');
				createCode(4);
				return false;
			} 
			if (password === 'password') {
				alert('登录成功！');
				jump();
				return true;
			}
			showErrorMessage("密码错误")

		}
	</script>
	<script>
		function checkEmpty(param1, param2) {
			var inputMessage = ["用户名", "密码", "验证码"]
			var myinputs = document.getElementsByTagName("input")

			for (var i = 0; i < myinputs.length; i++) {
				var tmpInput = myinputs[i]
				if (tmpInput.value === "") {
					alert(inputMessage[i] + "输入的内容不能为空")
					showErrorMessage(inputMessage[i] + "输入的内容不能为空")
					return false;
				}
			}
			return true;
		}
		function checkForm() {
			return checkEmpty() && checkPwdLength();
		}
		function checkPwdLength() {
			var pwdInput = document.getElementById("password")
			if (pwdInput.value.length < 6) {
				alert("密码的长度不能小于6个字符")
				showErrorMessage("密码的长度不能小于6个字符")
				return false;
			}
			return false;
		}
		function showErrorMessage(msg) {
			document.getElementById("errorMsg").innerHTML = "<b>" + msg + "</b>"
			document.getElementById("errorMsg").style.display = "block"
		}
	</script>
	<script src="vcode.js"></script>

	<footer id='foot'>
		<div>
			<h1>联系我们</h1>
			<p>电话：13181928266</p>
			<p>邮箱：1501918713@qq.com</p>
			<p>地址：山东省青岛市崂山区青岛大学金家岭校区</p>
		</div>
	</footer>
</body>

</html>